<template>
  <page-container :title="false" :breadcrumb="false">
    <div class="box-container">
      <a-form-model layout="inline" :model="queryParams">
        <a-form-model-item>
          <a-input v-model="queryParams.searchMs" placeholder="请输入日志名称/ID" allow-clear />
        </a-form-model-item>
        <a-form-model-item>
          <a-range-picker v-model="queryParams.timeSlot" show-time value-format="YYYY-MM-DD HH:mm:ss" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            icon="search"
            html-type="submit"
            @click="getTableDataByFirst"
          >
            查询
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

    <div class="mt10 bg-white">
      <s-table
        ref="table"
        row-key="id"
        :columns="tableParams.columns"
        :data="tableParams.loadData"
        :init-request="tableParams.initRequest"
        :pagination="tableParams.pagination"
        :scroll="{ x: 2000, y:500 }"
      >
        <span slot="remark" slot-scope="text">
          <text-tooltip :content="text" />
        </span>
      </s-table>
    </div>
  </page-container>
</template>

<script>
import {
  getLogByPageApi
} from '@/api/system/log'
import { parseTime } from '@/utils'

export default {
  name: 'Log',
  data() {
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        width: 200,
        fixed: 'left'
      },
      {
        title: '日志标题',
        dataIndex: 'logTitle'
      },
      {
        title: '日志内容',
        dataIndex: 'centent'
      },
      {
        title: '创建者ID',
        dataIndex: 'createByName'
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
        customRender(createDate) {
          return parseTime(createDate)
        }
      },
      {
        title: '请求URL',
        dataIndex: 'requestUri'
      },
      {
        title: '操作方式',
        dataIndex: 'requestMethod'
      },
      {
        title: '操作提交的数据',
        dataIndex: 'requestParams'
      },
      {
        title: '业务类型',
        dataIndex: 'bizType'
      },
      {
        title: '操作IP地址',
        dataIndex: 'remoteAddr'
      },
      {
        title: '请求服务器地址',
        dataIndex: 'serverAddr'
      },
      {
        title: '是否异常',
        dataIndex: 'isException'
      },
      {
        title: '异常信息',
        dataIndex: 'exceptionInfo'
      },
      {
        title: '用户代理',
        dataIndex: 'userAgent'
      },
      {
        title: '设备名称',
        dataIndex: 'deviceName'
      },
      {
        title: '浏览器名称',
        dataIndex: 'browserName'
      },
      {
        title: '执行时间(ms)',
        dataIndex: 'executeTime'
      }
    ]

    return {
      queryParams: {
        searchMs: undefined,
        timeSlot: undefined
      },

      tableParams: {
        pagination: {
          showTotal: total => `共 ${total} 条`,
          showQuickJumper: true,
          pageSizeOptions: ['5', '10', '15', '20']
        },
        columns,
        loadData: parameter => {
          const queryParams = this.$parseQueryParams(this.queryParams)
          if (queryParams.timeSlot && queryParams.timeSlot.length > 0) {
            queryParams.start = queryParams.timeSlot[0]
            queryParams.end = queryParams.timeSlot[1]
            delete queryParams.timeSlot
          }

          const requestParameters = Object.assign({}, parameter, queryParams)
          return getLogByPageApi(requestParameters)
            .then(res => {
              return res.data
            })
        },
        initRequest: true
      },
      loading: false
    }
  },
  created() {
    // this.initDict()
    this.getTableDataByFirst()
  },
  methods: {
    getTableDataByFirst() {
      this.$refs.table && this.$refs.table.refresh(true)
    },

    /**
     * 初始化数据字典
     */
    initDict() {
      this.$getCodeDictMap(this, {
        APPERTAIN: 'appertainList'
      })
    }
  }
}
</script>

<style scoped>
/** 全局表格头部操作 */
.table_title_operate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

</style>
